<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btnl{
            width: 150px;
            height: 40px;
            font-size: 24px;
            font-family: '隶书';
            background-color: blue;
            color: red;
            border: 3px solid rgb(151, 8, 8);
            border-radius: 5px;
        }
    </style>
<!--         
        引入方式
        1.内嵌式    在head中通过一对script标签定义脚本代码 
        2.引入外部脚本文件      在head中通过一对script标签引入外部js文件
        注意：
            1.一个html中可以有多个script标签
            2.一对script标签不能在引入外部js文件的同时定义内部脚本
            3.script标签如果用于引入外部js文件，中间最好不要有任何字符，包括空格和换行
-->
        
    <!-- <script>
        /*
        1.js如何声明函数？  function suprise(){}
        2.函数如何和单机按钮的行为绑定到一起？
        3.如何弹窗提示？
        */
       function suprise(){
        //弹窗提示
            alert("hello,我是惊喜")
       }
    </script> -->
    <script src="js/button.js" type="text/javascript"></script>
</head>
<body>
    <button class="btnl" onclick="suprise()">点我有惊喜</button>
</body>
</html>